<div class="box">
  <div class="box-header with-border">
    <button class="btn btn-success btn-sm" (click)="createStock()"><i class="glyphicon glyphicon-plus"></i>新增</button>
    <div class="box-tools">
      <div class="input-group input-group-sm" style="width: 150px;">
        <input type="text" name="table_search" class="form-control pull-right" placeholder="Search" [formControl]="nameFilter">
        <div class="input-group-btn">
          <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </div>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <table class="table table-bordered">
      <tr>
        <th>股票代码</th>
        <th>股票名称</th>
        <th>股票价格</th>
        <th>股票评价</th>
        <th>股票描述</th>
        <th>股票类别</th>
        <th>操作</th>
      </tr>
      <tr *ngFor = "let stock of stocks | stockFilter:'name':keyWord">
        <td>{{ stock.id }}</td>
        <td>{{ stock.name }}</td>
        <td>{{ stock.price }}</td>
        <td><app-stars [rating]="stock.rating"></app-stars></td>
        <td>{{ stock.desc }}</td>
        <td>{{ stock.stockSort }}</td>
        <td>
          <button class="btn btn-warning btn-xs" (click)="updateStock(stock)"><i class="glyphicon glyphicon-pencil"></i>修改</button>
          <button class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove"></i>删除</button>
        </td>
      </tr>
    </table>
  </div>
  <!-- /.box-body -->
  <div class="box-footer clearfix">
    <ul class="pagination pagination-sm no-margin pull-right">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
  </div>
</div>
